<!--
 * @FileDescription: 梯控 - 处置禁用时长表单
 * @Author: Ronghao Zhu
 * @CreateTime: 2020/09/07 星期一
 * @LastEditors: Ronghao Zhu
 * @LastEditTime: 2020/09/07
-->

<template>
  <div class="form-table">
    <el-form
      ref="editForm"
      label-position="left"
      :model="rowData"
      :rules="rules"
      :label-width="formInline.status === 3 ? '130px' : '100px'"
      @submit.native.prevent
    >
      <el-form-item prop="operCode" :label="formInline.status === 3 ? '禁用时长改为：' : '禁用时长：'">
        <el-radio v-model="rowData.operCode" label="2" v-if="formInline.status === 3">取消禁用</el-radio>
        <el-radio-group v-model="rowData.time">
          <el-radio label="600">禁用10分钟</el-radio>
          <el-radio label="3600">禁用1小时</el-radio>
          <el-radio label="86400">禁用1天</el-radio>
          <el-radio label="-1">永久禁用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="禁用原因：" prop="remark">
        <el-input
          v-model.trim="rowData.remark"
          auto-complete="off"
          type="textarea"
          maxlength="500"
          rows="4"
          show-word-limit
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item class="form-bottom-btns">
        <el-button @click="hideEdit()">取消</el-button>
        <el-button type="primary" @click="submitForm('editForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "ElevatorControllerHandleForm",
  components: {},
  props: {
    hideEdit: {
      type: Function,
      required: true,
    },
    formInline: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      rules: {
        operCode: [{ required: true, message: "请选择", trigger: "change" }],
      },
      rowData: {
        time: "",
        remark: "",
      },
    };
  },
  watch: {
    "rowData.operCode": {
      handler(newVal, oldVal) {
        // 如果取消禁用 禁用时长不传
        if (newVal === "2") this.$set(this.rowData, "time", "");
      },
      deep: true,
    },
    "rowData.time": {
      handler(newVal, oldVal) {
        // 如果传了时长 operCode要变为1-禁用 2-取消禁用
        if (newVal) this.$set(this.rowData, "operCode", "1");
      },
      deep: true,
    },
  },
  created() {},
  methods: {
    /* 保存 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.hideEdit(this.rowData);
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.form-table {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  padding: 0 20px;
  background-color: #fff;
  z-index: 2;
  .el-radio {
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
}
</style>
